<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        * {
            padding: 0;
            margin: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
        }

        img,
        h2,
        p {
            transition: all 1s;
        }

        .content {
            width: 1500px;
            margin: 0 auto;
        }

        .content > div {

            width: 500px;
            height: 400px;

            /*排成一行，多余的换行*/
            float: left;

            /*超出去的界面隐藏*/
            overflow: hidden;
            position: relative;
        }

        /*第一个*/
        .content > div:nth-child(1) h2 {
            position: absolute;
            top: 50px;
            left: 50px;
            color: white;
        }

        .content > div:nth-child(1) p {
            position: absolute;
            left: 150px;
            background-color: white;
            transition: all 0.5s;
        }

        .content > div:nth-child(1) p:nth-of-type(1) {
            top: 150px;
            transform: translateY(400px);
        }

        .content > div:nth-child(1) p:nth-of-type(2) {
            top: 200px;
            transform: translateX(500px);
        }

        .content > div:nth-child(1) p:nth-of-type(3) {
            top: 250px;
            transform: translateX(-500px);
        }

        .content > div:nth-child(1):hover p:nth-of-type(1) {
            transform: translateY(0);
        }

        .content > div:nth-child(1):hover p:nth-of-type(2) {
            transform: translateX(0);
        }

        .content > div:nth-child(1):hover p:nth-of-type(3) {
            transform: translateX(0);
        }

        .content > div:nth-child(1):hover img {
            transform: translateX(100px);
            /*透明度*/
            opacity: 0.5;
        }

        .content > div:nth-child(1):hover h2 {
            /*延时效果，动画不同时开始*/
            transition-delay: 0.1s;
            transform: translateX(100px);
        }

        /*第二个*/
        .content > div:nth-child(2) h2 {
            position: absolute;
            top: 50px;
            left: 50px;
            color: white;
        }

        .content > div:nth-child(2) p {
            position: absolute;
            top: 150px;
            left: 50px;
            background-color: white;
            transform: translateX(-500px);
            /*使用延迟，做到先后效果*/
            transition-delay: 0.1s;
        }

        .content > div:nth-child(2) p:nth-of-type(2) {
            top: 200px;
            transition-delay: 0.2s;
        }

        .content > div:nth-child(2) p:nth-of-type(3) {
            top: 250px;
            transition-delay: 0.3s;
        }

        .content > div:nth-child(2):hover p {
            transform: translateX(0);
        }

        .content > div:nth-child(2):hover img {
            transform: translateX(-100px);
            opacity: 0.5;
        }

        /* 第三个 */

        .content > div:nth-child(3) h2 {
            position: absolute;
            top: 100px;
            left: 100px;
            color: white;
            transform: translateY(-200px);
        }

        .content > div:nth-child(3) p {
            position: absolute;
            top: 150px;
            left: 120px;
            width: 350px;
            transform: translateY(400px);
        }

        .content > div:nth-child(3):hover h2 {
            transform: translateY(0);
        }

        .content > div:nth-child(3):hover p {
            transform: translateY(0);
        }

        .content > div:nth-child(3):hover img {
            transform: translateY(-10px);
            opacity: 0.5;
        }

        /* 第四个 */
        .content > div:nth-child(4) > div {
            position: absolute;
            width: 600px;
            height: 300px;
            background-color: dodgerblue;
            bottom: -300px;
            transition: all 1s;
            /*修改旋转中心*/
            transform-origin: 0 0;
        }

        .content > div:nth-child(4):hover > div {
            transform: rotate(-15deg);
        }

        .content > div:nth-child(4) h2 {
            position: absolute;
            top: 50px;
            left: 20px;
            color: white;
            transform: translateY(50px);
            opacity: 0;
        }

        .content > div:nth-child(4):hover h2 {
            transform: translateY(0);
            opacity: 1;
        }

        .content > div:nth-child(4) p {
            position: absolute;
            bottom: 100px;
            right: 50px;
            background-color: white;
            transform: translateY(150px);
            z-index: 1;
            transition-delay: 0.2s;
        }

        .content > div:nth-child(4):hover p {
            transform: translateY(0);
        }

        /* 第五个 */
        .content > div:nth-child(5) .box {
            position: absolute;
            top: 50px;
            left: 50px;
            /* hover里面有的属性值，在非hover时候也要有。不然，不会执行对应的动画 */
            transform: translateY(-600px) rotate(0deg);
            height: 300px;
            width: 400px;
            border: 2px solid black;
            transition: all 1s;
            transform-origin: 20% 30%;
        }

        .content > div:nth-child(5):hover .box {
            transform: translateY(0px) rotate(720deg);
        }

        .content > div:nth-child(5) h2 {
            position: absolute;
            top: 100px;
            left: 20px;
            color: white;
        }

        .content > div:nth-child(5):hover h2 {
            transform: translateX(50px);
        }

        .content > div:nth-child(5) p {
            position: absolute;
            top: 300px;
            left: 70px;
            color: white;
            opacity: 0;
            width: 350px;
        }

        .content > div:nth-child(5):hover p {
            transform: translateY(-150px);
            opacity: 1;
        }

        /* 第六个 */
        .content > div:nth-child(6) h2 {
            position: absolute;
            top: 250px;
            left: 250px;

        }

        .content > div:nth-child(6):hover h2 {
            transform: rotate(675deg);
        }

        .content > div:nth-child(6):hover img {
            transform: scale(1.2);
            opacity: 0.5;
        }

        /* 第7个 */
        .content > div:nth-child(7):hover img {
            transform-origin: 60% 60%;
            transform: scale(0.9);
            opacity: 0.5;
        }

        /*第8个*/
        .content > div:nth-child(8) h2 {
            position: absolute;
            top: 150px;
            left: 250px;
            z-index: 1;
            transform-origin: 20% -20%;
            transform: rotate(-180deg) translateY(250px);
        }

        .content > div:nth-child(8):hover h2 {
            transform: rotate(0) translateY(0);
        }

        .border01 {
            position: absolute;
            top: 20px;
            left: 100px;
            width: 300px;
            height: 0px;
            border-left: 2px solid white;
            border-right: 2px solid white;
            transition: all 1s;
        }

        .border02 {
            position: absolute;
            top: 70px;
            left: 50px;
            width: 0px;
            height: 300px;
            border-top: 2px solid white;
            border-bottom: 2px solid white;
            transition: all 1s;
        }

        .content > div:nth-child(8):hover .border01 {
            height: 400px;
        }

        .content > div:nth-child(8):hover .border02 {
            width: 400px;
        }

        /*第9个*/
        .content > div:nth-child(9):hover img {
            transform: rotate(15deg) scale(1.2);
            opacity: 0.5;
        }


    </style>
</head>
<body>

<div class="content">
    <div>
        <img src="imgs/img-taylor-swift/1.png"/>
        <div>
            <h2>Billboard三首排行第一</h2>
            <p>Shake It Off</p>
            <p>Black Space</p>
            <p>Bad Blood</p>
        </div>
    </div>

    <div>
        <img src="imgs/img-taylor-swift/2.png"/>
        <div>
            <h2>Taylor Swift</h2>
            <p>Birthday:1989.12.13</p>
            <p>Height:180cm</p>
            <p>Weight:56kg</p>
        </div>
    </div>

    <div>
        <img src="imgs/img-taylor-swift/3.png"/>
        <div>
            <h2>Back To December</h2>
            <p>I'm so glad you made time to see me. How's life, tell me how's your family? I haven't seen them in a
                while. You've been good, busier then ever. We small talk, work and the weather Your guard is up and I
                know why..</p>
        </div>
    </div>

    <div>
        <img src="imgs/img-taylor-swift/4.png"/>
        <div>
            <h2>1989</h2>
            <p>Taylor Swift《1989》</p>
        </div>
        <!--右下角的滑动三角-->
        <div>
        </div>
    </div>

    <div>
        <img src="imgs/img-taylor-swift/5.png"/>
        <div>
            <h2>Taylor Swift-《22》</h2>
            <p>I don't know about you, but I’m feeling 22, Everything will be alright if you keep me next to you, You
                don't know about me, but I bet you want to, Everything will be alright if we just keep dancing like
                we're... 22 22</p>
        </div>
        <div class="box">
        </div>
    </div>

    <div>
        <img src="imgs/img-taylor-swift/6.png"/>
        <div>
            <h2>Out of the Woods</h2>
        </div>
    </div>

    <div>
        <img src="imgs/img-taylor-swift/7.png"/>
        <div>
            <h2>Billboard三首排行第一</h2>
            <p>Shake It Off</p>
            <p>Black Space</p>
            <p>Bad Blood</p>
        </div>
    </div>

    <div>
        <img src="imgs/img-taylor-swift/8.png"/>
        <div>
            <h2>Taylor Swift</h2>
            <div class="border01">
            </div>
            <div class="border02">
            </div>
        </div>
    </div>

    <div>
        <img src="imgs/img-taylor-swift/9.png"/>
        <div>
            <h2>Billboard三首排行第一</h2>
            <p>Shake It Off</p>
            <p>Black Space</p>
            <p>Bad Blood</p>
        </div>
    </div>
</div>


</body>
</html>